<template>
  <div id="audio-player">
    <audio ref="playerBox" autoplay autobuffer>您的浏览器不支持 audio 标签。</audio>
  </div>
</template>

<script>
// import { musicUrl } from '@/api/music';

export default {
  name: 'AudioPlayer',

  data() {
    return {
      // // 音乐地址
      // musicUrl: '',
      // 当前播放到时间
      currentTime: '',
      // 歌曲总时间
      duration: '',
      // 歌曲名
      songName: '',
      // 歌手名
      singerName: [],
      // 歌曲图片
      songImg: ''
    }
  },

  methods: {
    initAudio() {
      const audio = this.$refs.playerBox;
      const _that = this;
      audio.src = this.musicUrl;
      // 音量默认为50
      // audio.volume = 50;
      // 绑定三个触发方法
      // 当时长有变化时触发，由"NaN"变为实际时长也算
      audio.ondurationchange = function() {
        console.log('时长发生了变化')
        // _that.updateTime(audio, 'once');
        // _that.$emit('ondurationchange', {
        //   currentTime: _that.currentTime,
        //   duration: _that.duration,
        //   songName: _that.songName,
        //   singerName: _that.singerName,
        //   songImg: _that.songImg,
        //   id: _that.audioId.id
        // });
        // _that.updateTime(audio, 'once');
        _that.$emit('ondurationchange', audio.duration);
      }
      // 当前数据可用时触发
      audio.oncanplay = function() {
        console.log('已经可以播放了')
        _that.$emit('oncanplay');
      }
      // 播放位置发送改变时触发。
      audio.ontimeupdate = function() {
        console.log('播放位置发送了变动')
        // _that.updateTime(audio);
        _that.$emit('ontimeupdate', audio.currentTime);
      }
      // 音频播放完毕
      audio.onended = function() {
        console.log('播放完毕')
        _that.$emit('onended');
      }
      // 音频播放完毕
      audio.onerror = function() {
        console.log('加载出错！')
      }
    },
    // // 获取播放歌曲
    // async getMusicUrl() {
    //   const res = (await musicUrl(this.audioId.id)).data;
    //   if (res.code !== 200) return this.$message.error('播放失败');
    //   if (!res.data[0].url) {
    //     this.$message.warning('因版权方要求，该资源暂时无法播放，我们正在争取歌曲回归');
    //     this.musicUrl = '';
    //     return;
    //   }
    //   this.musicUrl = res.data[0].url;
    //   // 初始化audio
    //   this.initAudio();
    // },
    // 更新时间
    updateTime(audio, type) {
      // const songInfo = this.audioList.find(item => item.id == this.audioId.id);
      this.currentTime = audio.currentTime;
      // 第一次更新时执行一次即可
      if (type === 'once') this.duration = audio.duration;
      // {
        // this.duration = audio.duration;
        // 接口返回的属性名不同
        // if (this.audioId && this.audioId.album) {
        //   this.singerName = this.audioId.artists;
        //   this.songImg = this.audioId.album.picUrl;
        //   this.songName =
        //   `${this.audioId.name}${this.audioId.alias && this.audioId.alias.length ? `（${this.audioId.alias[0]}）` : ''}`;
        //   return;
        // }
        // this.singerName = this.audioId.ar;
        // this.songImg = this.audioId.al.picUrl;
        // this.songName =
        // `${this.audioId.name}${this.audioId.alia && this.audioId.alia.length ? `（${this.audioId.alia[0]}）` : ''}`;
      // }
    }
  },

  mounted() {
    this.initAudio();
  }
}
</script>

<style lang="less" scoped>
#audio-player {
  position: fixed;
  right: 0;
  bottom: 0;
}
</style>